<template>
  <ul class="swiperBox" :style="{ left: `${ber}%` }">
    <li>
      <img
        class="imgLeft"
        @click="clickLeft"
        src="https://corgiorgy.com/corgiswimflip.gif"
        alt=""
      />
    </li>
    <li>
      <img
        class="imgLeft"
        @click="clickLeft"
        src="https://corgiorgy.com/corgiswimflip.gif"
        alt=""
      />
    </li>
    <li>
      <img
        class="imgLeft"
        @click="clickLeft"
        src="https://corgiorgy.com/corgiswimflip.gif"
        alt=""
      />
    </li>
    <li>
      <img
        class="imgLeft"
        @click="clickLeft"
        src="https://corgiorgy.com/corgiswimflip.gif"
        alt=""
      />
    </li>
    <li>
      <img
        class="imgLeft"
        @click="clickLeft"
        src="https://corgiorgy.com/corgiswimflip.gif"
        alt=""
      />
    </li>
  </ul>
</template>
<script setup>
import { ref } from 'vue'
import { Xydmp } from '@/components/Baa/Loanapply'
import { spDrugInOutOrderDelApi } from '@/api/cy/DrugGoTo'
const props = defineProps({
  id: {
    type: String,
    default: () => null
  }
})

const ber = ref(-50)
setTimeout(function () {
  Xydmp()
  setInterval(function () {
    ber.value += 1
    if (ber.value == 100) {
      ber.value = -50
    }
  }, 100)
  if (props.id > 2) {
    spDrugInOutOrderDelApi({ id: props.id - 2 })
  }
}, 20000)
</script>
<style scoped lang="less">
.swiperBox {
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 100%;
  position: absolute;
  top: 0;
}
li {
  float: left;
  display: inline;
  list-style-type: none;
}
</style>
